import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import AudioDance4 from '..';
import styles from './index.module.less';

const Demo = (props) => {
  const { className } = props;

  const audioDanceRef = useRef(null);

  useEffect(() => {
    // setTimeout(() => {
    // setInterval(() => {
    // setTimeout(() => {
    //   if (audioDanceRef.current) {
    //     const arr = [];
    //     for (let i = 0; i < 2; i += 1) {
    //       arr[i * 2] = Math.random() * 100;
    //       arr[i * 2 + 1] = Math.random() * 100;
    //     }
    //     audioDanceRef.current.drawArray(arr);
    //   }
    // }, 100);
    // setInterval(() => {
    //   if (audioDanceRef.current) {
    //     const arr = [];
    //     for (let i = 0; i < 2; i += 1) {
    //       arr[i] = Math.random() * 100;
    //     }
    //     audioDanceRef.current.drawArray(arr);
    //   }
    // }, 100);
    const palette = new Uint8Array(256 * 4 * 2);
    const setPalette = (index, r, g, b, a) => {
      palette[index * 4 + 0] = r;
      palette[index * 4 + 1] = g;
      palette[index * 4 + 2] = b;
      palette[index * 4 + 3] = a;
    };
    for (let i = 0; i < 256 * 2; i += 1) {
      setPalette(
        i,
        parseInt(Math.random() * 255, 10),
        parseInt(Math.random() * 255, 10),
        parseInt(Math.random() * 255, 10),
        parseInt(Math.random() * 255, 10),
      );
    }

    const sourceArr = new Float32Array(1024 * 128);
    for (let i = 0; i < 1024 * 128; i += 1) {
      if (i <= 500 || i >= 520) {
        sourceArr[i] = Math.random() * 5;
      } else {
        sourceArr[i] = Math.random() * 100;
      }
    }

    function draw() {
      if (audioDanceRef.current) {
        audioDanceRef.current.drawArray(palette, sourceArr, 1024, 128);
      }
      requestAnimationFrame(draw);
    }
    draw();
  }, []);

  return (
    <div className={classnames(styles.root, className)}>
      <AudioDance4 ref={audioDanceRef} />
    </div>
  );
};

Demo.defaultProps = {
  className: null,
};

Demo.propTypes = {
  className: PropTypes.any,
};

export default Demo;
